<script setup lang="ts">
import { ref } from 'vue';
import { useFetch } from '@/home/hooks/fetch';
import type { HotOrg } from './hot'
import LoadingBox from '@/home/components/LoadingBox.vue';
import Loading from '@/home/components/Loading.vue';
import CustomAvatar from '@/home/components/CustomAvatar.vue';
import Platform from '@/common/components/platform-avatar/index.vue';

const props = defineProps<HotOrg>();
const emit = defineEmits(['change-follow']);
const { $fetch } = useFetch();

const loading = ref(false);
const changeFocus = async (orgId: string, isFocus: boolean) => {
  loading.value = true;

  const { isSuccess } = await $fetch(isFocus ? '/org/cancel' : '/org/focus', {
    autoGotoLogin: true,
    data: { orgId },
  });

  if (isSuccess) {
    console.log('success');
  } else {
    console.log('fail');
  }

  loading.value = false;
};
const handleClick = async () => {
  await changeFocus(props.id, props.isFocus);
  emit('change-follow');
};
</script>

<template>
  <div class="h-72">
    <div class="h-52 flex justify-between">
      <div class="flex gap-16">
        <a :href="props.jump" target="_blank">
          <CustomAvatar :photo="props.avatarUrl ?? ''" :title="props.name" :module="['rounded-inherit']" class="size-52 border border-[#ffffff] rounded-10 border-solid shadow-[0_0_0_1px_#e3e3e3]" />
        </a>
        <div class="max-w-204 flex-col justify-between">
          <div class="flex-y-center gap-x-4">
            <a :href="props.jump" target="_blank">
              <h3 class="max-w-190 truncate text-16 c-hex-292929 font-500 leading-28 hover:underline">
                {{ props.name }}
              </h3>
            </a>
            <Platform class="shrink-0" :platform="props.platform" icon-class="size-16" tooltip />
          </div>
          <p class="max-w-full truncate text-14 c-hex-575757 leading-22">
            {{ props.description ?? props.profile }}
          </p>
        </div>
      </div>
      <button
        @click="handleClick"
        :disabled="loading"
        :class="[
          'mb-auto mt-auto h-36 w-72 border border-[#E3E3E3] rounded-18 border-solid bg-transparent text-center text-12 font-500 leading-16 transition-all',
          loading ? '' : 'hover:border-[#292929]'
        ]"
      >
        <LoadingBox :loading="loading">
          <template #default>
            {{ props.isFocus ? $t('home.hot.followed') : $t('home.hot.follow') }}
          </template>
          <template #loading>
            <div class="flex-center">
              <Loading class="size-16 color-hex-8b8b8b" />
            </div>
          </template>
        </LoadingBox>
      </button>
    </div>
    <div>
      <div class="grid grid-cols-[1fr_1fr] ml-68 mr-68 grid-gap-20">
        <div v-for="repo in props.warehouseList" :key="repo.warehouseName" class="flex">
          <a :href="repo.jump" target="_blank" class="group flex gap-4 c-hex-575757">
            <div class="i-icons:repository size-16"></div>
            <span class="max-w-94 truncate text-12 leading-16 group-hover:underline">
              {{ repo.warehouseName }}
            </span>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
</style>
